<!DOCTYPE html>
<html>
<head>
	<title>GoogleMapsTest</title>
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
	
	<script src="@{'/public/javascripts/jquery-1.4.2.js'}"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
	
	var googleMap = {};
	var mapCanvasStub = {};

	var TILE_SIZE = 256;
	var IMG_PIXELS_IN_TILE = 64;
	var MIN_ZOOM = 1;
	var MAX_ZOOM = 16;
	var SCALE_RATIO = Math.pow(2, MAX_ZOOM) / (TILE_SIZE / IMG_PIXELS_IN_TILE);
	
	function CoordMapType() { 
	}

	
	function EuclideanProjection() {
		this.pixelOrigin_ = new google.maps.Point(0, 0);
		this.scaleLat = SCALE_RATIO;    // image pixels in a tile under the largest zoom level
		this.scaleLng = SCALE_RATIO;      
		this.offsetLat = 0;     
		this.offsetLng = 0;     
	};

	EuclideanProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) {
		var point = opt_point || new google.maps.Point(0, 0);

		var origin = this.pixelOrigin_;
		point.x = (origin.x + (latLng.lng() + this.offsetLng ) / this.scaleLng );
		point.y = (origin.y + (latLng.lat() + this.offsetLat ) / this.scaleLat);
		return point;
	};

	EuclideanProjection.prototype.fromPointToLatLng = function(point) {
		var origin = this.pixelOrigin_;
		var lng = (((point.x - origin.x)) * this.scaleLng) - this.offsetLng;
		var lat = ((( point.y - origin.y)) * this.scaleLat) - this.offsetLat;
		return new google.maps.LatLng(lat , lng, true);
	}; 
	
	
	
	var CoordMapType = function() {};
	CoordMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
			var div = ownerDocument.createElement('DIV');
			div.innerHTML = coord + " - " + zoom ;
			div.style.width = this.tileSize.width + 'px';
			div.style.height = this.tileSize.height + 'px';
			div.style.fontSize = '10';
			div.style.borderStyle = 'solid';
			div.style.borderWidth = '1px';
			div.style.borderColor = '#AAAAAA';
			return div;
		};
	CoordMapType.prototype.tileSize = new google.maps.Size(TILE_SIZE, TILE_SIZE);
	CoordMapType.prototype.minZoom  = MIN_ZOOM;
	CoordMapType.prototype.maxZoom  = MAX_ZOOM;


	var coordinateMapType = new CoordMapType();
	coordinateMapType.name = 'Tile';
	coordinateMapType.alt  = 'Tile with numbers';
	coordinateMapType.projection = new EuclideanProjection();
	

	
	
	var myImageMapType = new google.maps.ImageMapType({
		getTileUrl: function(coord, zoom) {
						//url = "tile.php?t=" + encodeURIComponent("tiles/i<?=$img?>/z" + zoom + "/x" + coord.x + "/y" + coord.y + ".png");
						//url = "http://localhost/GoogleMapsTest/tile.png";
						url = "http://localhost:9000/tile?img=" + "1" + "&x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
						return url;
					},
		tileSize: 	new google.maps.Size(TILE_SIZE, TILE_SIZE),
		minZoom: 	MIN_ZOOM,
		maxZoom:	MAX_ZOOM,
		isPng:		true,
		name:		'Image',
		alt:		'Images'				
	}); 
	myImageMapType.projection = new EuclideanProjection();
	
	

	

	var loc = new google.maps.LatLng(0, 0);

	
	
	function initialize() {
		
		
		var mapOptions = {
			zoom:		 			1,
			center: 				loc,
			mapTypeId: 				'coordinate',
			mapTypeControlOptions: 	{
										mapTypeIds: 	['coordinate', 'mytile'],
										style: 			google.maps.MapTypeControlStyle.HORIZONTAL_BAR
									},
			streetViewControl: 		false
		};
		googleMap = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

		
	    
		googleMap.mapTypes.set('coordinate', coordinateMapType);
		googleMap.mapTypes.set('mytile', myImageMapType);

		googleMap.setMapTypeId('mytile');

		google.maps.event.addListener(googleMap, 'mousemove', function(event) {
			var str = event.latLng.toString();
    		$("#info").html(str);
		});
		//document.write(googleMap.getBounds());
	}
	</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 1024px; height: 768px;">map div</div>
<div id="info"></div>
</body>
</html>